<template>
    <router-link class="list-item" :to="path">
        <div class="content">
            <img v-lazy="image" class="img">
            <p class="name">{{name}}</p>
        </div>
        <i class="icon iconfont icon-right"></i>
    </router-link>
</template>

<script>
export default {
    name: 'ListItem',
    props: {
        image: {
            type: String,
            required: true
        },
        name: {
            type: String,
            required: true
        },
        path: {
            type: String,
            required: true
        }
    }
}
</script>

<style lang="scss" scoped>
.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom: 1px solid #e5e5e5;
    .content {
        display: flex;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
        color: #333;
        .img {
            width: 80px;
            height: 80px;
            border: none;
        }
        .name {
            width: auto;
            margin-left: 12px;
            font-size: 1rem;
        }
    }
    .icon {
        color: #333;
        font-size: 1.2rem;
    }
}
</style>
